<template>
	<view>
		<u-index-list :scrollTop="scrollTop" :offset-top="0" :sticky="true" :showSidebar="true" :index-list="letters">
			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.letter" />
				<u-cell-group>
					<u-cell-item 
						v-for="(n,i) in item.data" :key="n.id" 
						:title="n.department"
						:label="n.user? '':'未绑定'"
						@click="bindApplyDepartment(n)">
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-index-list>
		<view class="u-h-400" v-if="list.length == 0">
			<u-empty text="暂无可加入的部门" mode="search"></u-empty>
		</view>
	</view>
</template>

<script>
	import pinyin from '@/common/pinyin.js';
	export default {
		data() {
			return {
				id: 0,
				scrollTop: 0,
				list: [],
				letters: [],
				indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad(opt) {
			this.id = opt.id
			this.getDepartment()
		},
		methods: {
			getDepartment(){
				this.$u.post('/Enterprise/List',{
					"pageIndex": 1,
					"pageSize": 999,
					"key": '',
					"parentId": this.id
				}).then((res)=>{
					this.loadIndexList(res.rows.filter((item)=>!item.user))
				})
			},
			loadIndexList(res) {
				var list = [];
				this.letters = [];
				let that=this;
				res.forEach(n => {
					n.letter = pinyin.getCamelChars(n.department.charAt(0));
				});
				this.indexList.forEach(n => {
					list.push({
						letter: n,
						data: res.filter(item => item.letter === n)
					});
				});
				this.list = list.filter(n => n.data.length > 0);
				this.list.forEach(item=>{
					this.letters.push(item.letter)
				})
			},
			// 绑定部门
			bindApplyDepartment(item){
				if(item.user != null){
					uni.showModal({
						content: '该部门已被绑定',
						success: (res)=> {
							
						}
					})
					return
				}
				
				uni.showModal({
					content: '您确定要申请加入该部门吗？',
					success: (res)=> {
						if (res.confirm) {
							this.$u.get('/Enterprise/BindApply/Create?id='+item.id).then((res)=>{
								uni.showModal({
									content: '申请提交成功',
									success: (res)=> {
										uni.switchTab({
											url: '/pages/index/index'
										})
									}
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
